<template>
  <div class="floating-div">
    <div class="flex flex-column" v-if="props.roles.length > 0">
      <div>
        <el-tooltip effect="dark" :content="buttonAuth ? '隐藏' : '更多操作功能'" placement="right">
          <el-button class="m-5" circle :size="size" plain @click="handleClick">
            <template #icon>
              <el-icon class="rotate blink" v-if="!buttonAuth" color="var(--el-color-primary)"><DArrowRight /></el-icon>
              <el-icon class="rotate" v-else color="var(--el-color-primary)"><DArrowLeft /></el-icon>
            </template>
          </el-button>
        </el-tooltip>
      </div>
      <div v-if="buttonAuth" @click="handleClick">
        <div v-for="(item, index) in props.roles" :key="index" v-permission="item.permission">
          <el-divider/>
          <el-tooltip effect="dark" :content="item.btnName" placement="right">
            <el-button class="m-5" circle :type="item.type" :size="size" plain @click="item.onClick()">
              <template #icon>
                <component :is="proxy.$icons[item.icon]" />
              </template>
            </el-button>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="ButtonAuthority">

import useCurrentInstance from '@/hooks/useCurrentInstance.js'
import { DArrowRight, DArrowLeft } from '@element-plus/icons-vue'

const { proxy } = useCurrentInstance()
const size = ref('default')
const props = defineProps({
  roles: {
    type: Array,
    default: () => []
  },
});
const buttonAuth = ref(true)

function handleClick () {
  buttonAuth.value = !buttonAuth.value;
}
</script>
<style scoped lang="scss">
.rotate {
  transform:rotate(90deg);
}

/* 定义关键帧 */
@keyframes blink {
  0%, 100% { opacity: 1; } /* 完全不透明 */
  50% { opacity: 0; } /* 完全透明 */
}

.blink {
  animation: blink 1s infinite; /* 动画名称、持续时间、无限次重复 */
}

.floating-div {
  position: absolute; /* 悬浮效果 */
  top: 10%; /* 距离顶部的位置 */
  right: 10px; /* 距离左侧的位置 */
  z-index: 90; /* 确保悬浮 div 在表格上方 */
  background-color: rgb(255,255,255);
  color: black; /* 文字颜色 */
  padding: 5px;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
:deep(.el-divider--horizontal) {
  margin: 1px 0;
}
</style>